<template>
  <h1>{{  }}</h1>
  <button @click="1">点击触发</button>
  <hr>
  <h1>{{ obj.age }}</h1>
  <button @click="obj.age++">点击</button>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
import {watch,reactive,ref} from 'vue'
// 2. 监听 引用类型的 属性(基本类型);
    let obj = ref({
      name: "张三",
      age: 20,
      cart: {
        name: "宝马",
      }
    })
    // 监听 引用类型的基本类似的属性 第一个值必须写成回调的形式;
    watch(obj,(newVal,oldVal)=>{
      console.log(newVal,oldVal);
    },{
      deep:true, //深度监听
      immediate:true // 立即监听
    })
</script>
<script>
export default {
  name: 'App',
}
</script>
